<template>
  <div class="kong">
    <el-dialog
      v-model="commemorationVisible"
      :title="'将&nbsp;' + commemorationVo.time + '&nbsp;设置为纪念日 '"
      width="500px"
      :close-on-click-modal="false"
      :before-close="handleClose"
      center
    >
      <div>
        <el-form-item label="纪念日名称" prop="content">
          <el-input
            v-model="commemorationVo.content"
            placeholder="请输入纪念日名称"
          />
        </el-form-item>
        <el-form-item label="纪念日类型" prop="commemorationType">
          <el-select
            :value="commemorationVo.commemorationType"
            v-model="commemorationVo.commemorationType"
            placeholder="请选择纪念日类型"
          >
            <el-option
              v-for="item in commemorationTypeParams"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              default-first-option
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间类型&nbsp;&nbsp;&nbsp;" prop="timeType">
          <el-select
            :value="commemorationVo.timeType"
            v-model="commemorationVo.timeType"
            placeholder="请选择纪念日类型"
          >
            <el-option value="1" label="阳历"></el-option>
            <el-option value="2" label="农历"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="纪念日备注" prop="remark">
          <el-input
            v-model="commemorationVo.remark"
            placeholder="请输入纪念日备注"
          />
        </el-form-item>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="submitAddIt()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue'
import { selectDetail } from '@/constants/commonSelect'
import { ElMessage, UploadInstance } from 'element-plus'
import { getGroupDetail } from '@/api/config'
import { addCommemorationDay } from '@/api/calendar'

// 初始化查询
onMounted(() => {
  getCommemorationType()
})

const commemorationVo = reactive({
  commemorationType: 1,
  remark: '',
  content: '',
  time: '',
  timeType: '1',
})

const commemorationTypeParams = ref<selectDetail[]>([])

const getCommemorationType = async () => {
  getGroupDetail('constgroup_commemoration_type').then((res: any) => {
    commemorationTypeParams.value = res
  })
}

const resetFields = () => {
  commemorationVo.time = ''
  commemorationVo.commemorationType = 1
  commemorationVo.remark = ''
  commemorationVo.content = ''
  commemorationVo.timeType = '1'
}

const cancel = () => {
  changeStatus(false)
  resetFields()
}

const handleClose = (done: () => void) => {
  changeStatus(false)
  resetFields()
  done()
}

interface Props {
  commemorationVisible?: Boolean
}
const myProps = defineProps<Props>()

const { commemorationVisible } = toRefs(myProps)

// 初始化查询
onMounted(() => {
  query()
})

const query = () => {}

const emit = defineEmits(['CommemorationDayConfig'])

const changeStatus = (status: boolean) => {
  resetFields()
  emit('CommemorationDayConfig', status)
}

const submitAddIt = () => {
  addCommemorationDay(commemorationVo).then((res: any) => {
    if (res.data) {
      ElMessage.success('添加成功')
      changeStatus(!commemorationVisible)
    } else {
      ElMessage.error('添加失败')
      changeStatus(!commemorationVisible)
    }
  })
}

const initsObj = (rows: any) => {
  commemorationVo.time = rows
}

defineExpose({
  initsObj,
})
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
